
<template>
  <div class="singlePage">
    <leftMenu></leftMenu>
    <div class="right-page">
      <systemMenu @node-select="nodeSelect" @after-op="getApiMethodList"></systemMenu>
      <div class="tableList">
        <searchForm :keys="['aname']" @on-search="onSearch" ref="searchForm">
          <el-button type="danger" size="mini" :disabled="selection.length==0" @click="handlerRemove">批量删除</el-button>
        </searchForm>
        <div class="table">
          <el-table
              :data="tableData"
              v-loading="loading"
              @selection-change="selectionChange"
              :header-cell-style="{background:'#F8F9FA'}"
              border height="calc(100% - 100px)"
              style="width: 100%;">
            <el-table-column
                type="selection"
                width="55">
            </el-table-column>
            <el-table-column
                prop="category"
                label="分类"
                width="80">
            </el-table-column>
            <el-table-column
                prop="url"
                label="API URL">
            </el-table-column>
            <el-table-column
                prop="name"
                label="API名称"
                width="180"
            >
            </el-table-column>
            <el-table-column
                prop="code"
                label="API编码">
            </el-table-column>
            <el-table-column
                prop="method"
                label="请求方式"
                width="100">
            </el-table-column>
            <el-table-column
                prop="authCode"
                label="权限编码">
            </el-table-column>
            <el-table-column
                prop="createdTime"
                label="创建时间">
              <template slot-scope="scope">
                {{scope.row.createTime | timeFormateYYYYMMDD}}
              </template>
            </el-table-column>
            <el-table-column
                prop="createdByName"
                label="创建人"
                width="100">
            </el-table-column>
            <el-table-column
                prop="status"
                label="状态"
                width="100">
              <template slot-scope="scope">
                {{apiMethodsStatusMap[scope.row.status]}}
              </template>
            </el-table-column>
            <el-table-column
                prop="address"
                width="180"
                label="操作">
              <template slot-scope="scope">

                <seeApiBtn :params="scope.row" ></seeApiBtn>
                <editApiBtn :params="scope.row" @after-op="afterOp"></editApiBtn>
                <apiMethodsStatusChange :params="scope.row" @after-op="afterOp"></apiMethodsStatusChange>
              </template>
            </el-table-column>

          </el-table>
          <pagination :page="pageInfo.page" :pageSize="pageInfo.pageSize" :total="pageInfo.total" @pageChange="pageChange" @handleSizeChange="handleSizeChange"></pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import leftMenu from "@/components/leftMenu";
import searchForm from "@/views/APImanage/module/searchForm";
import systemMenu from "@/views/APImanage/module/systemMenu";
import addApiBtn from "@/views/APImanage/module/addApiBtn";
import dict from "@/util/dict";
import apiMethodsStatusChange from "@/views/APImanage/module/apiMethodsStatusChange";
import seeApiBtn from "@/views/APImanage/module/seeApiBtn";
import editApiBtn from "@/views/APImanage/module/editApiBtn";
import pagination from "@/components/pagination";
export default {
  name: "APIlist",
  components:{
    leftMenu,
    searchForm,
    systemMenu,
    addApiBtn,
    apiMethodsStatusChange,
    seeApiBtn,
    editApiBtn,pagination
  },
  mounted() {
    this.getApiMethodList()
  },
  methods:{
    pageChange(page){
      this.pageInfo.page = page
      this.getApiMethodList()
    },
    handleSizeChange(size){
      this.pageInfo.page = 1
      this.pageInfo.pageSize = size
      this.getApiMethodList()
    },
    handlerRemove(){

    },
    selectionChange(selection){
      this.selection = selection
    },
    onSearch(){
      this.pageInfo.page = 1
      this.getApiMethodList()
    },
    afterOp(){
      this.getApiMethodList()
    },
    nodeSelect(node){
      this.systemId = node.id
      this.getApiMethodList()
    },
    getApiMethodList(){
      let params = {
        page:this.pageInfo.page - 1,
        pageSize:this.pageInfo.pageSize,
        systemId:this.systemId,
        name:this.$refs.searchForm.form.name
      }
      this.loading = true
      this.$api.getApiMethodList(params).then(res=>{
        this.loading = false
        this.tableData = res.data.data
        this.pageInfo.total = res.data.recordsTotal
      })
    },
  },
  data() {
    return {
      systemId:'',
      tableData: [],
      loading:false,
      selection:[],
      pageInfo: {
        ...dict.pageInfo
      },
      apiMethodsStatusMap:dict.apiMethodsStatusMap
    }
  }
}
</script>

<style scoped lang="less">
.singlePage{
  display: flex;
  .right-page{
    padding: 20px;
    flex:1;
    width: calc(100% - 40px);
    display: flex;
    .tableList{
      background: white;
      width: calc(100% - 221px);
      padding: 0 10px;
      height: 100%;
      .table{
        height: calc(100% - 50px);
      }
    }
  }
}
</style>